<template>
  <div class="searchLeads">
    <top-bar :isBlack="true" title="Leads状态查询"></top-bar>
    <div class="select-group">
      <div class="select-wrapper" @click="showStatus = true">
        {{ form.status }}
        <img src="@/assets/icon_06.png" alt="" class="icon" />
      </div>
      <div class="silde-row">
        <div
          class="select-btn"
          @click="showcalendar = true"
          v-if="form.start && form.end"
        >
          {{ form.start }}-{{ form.end }}
        </div>
        <div class="select-btn" @click="showcalendar = true" v-else>
          RFP 1st Sent Date
        </div>
        <input
          type="text"
          class="select-input"
          placeholder="Sender Full Name"
          v-model="form.search"
          @keyup.enter="getList"
        />
      </div>
    </div>
    <div class="card-list">
      <div class="card" v-for="(item, index) in list" :key="index">
        <div class="card-body">
          <div class="card-body-item">
            <p class="card-label">RFP 1st Sent Date</p>
            <p class="card-value">{{ item["RFP 1st Sent Date"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">RFP ID</p>
            <p class="card-value">{{ item["RFP ID"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Lead Share Id</p>
            <p class="card-value">{{ item["Lead Share Id"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Lead Status</p>
            <p class="card-value">{{ item["Lead Status"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Sender Full Name</p>
            <p class="card-value">{{ item["Sender Full Name"] }}</p>
          </div>
          <div class="card-body-item block">
            <p class="card-label">Receiver Hotel Email Id</p>
            <p class="card-value">{{ item["Receiver Hotel Email Id"] }}</p>
          </div>
          <div class="card-body-item block">
            <p class="card-label">Receiver Full Name</p>
            <p class="card-value">{{ item["Receiver Full Name"] }}</p>
          </div>
          <div class="card-body-item block">
            <p class="card-label">Receiver Hotel Name</p>
            <p class="card-value">{{ item["Receiver Hotel Name"] }}</p>
          </div>
          <div class="card-body-item block">
            <p class="card-label">Meeting Name</p>
            <p class="card-value">{{ item["Meeting Name"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Room Start Date</p>
            <p class="card-value">{{ item["Room Start Date"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Room End Date</p>
            <p class="card-value">{{ item["Room End Date"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Total Definite Revenue- USD</p>
            <p class="card-value">
              {{ item["Total Definite Revenue- USD"] | getEnUs }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <van-calendar
      color="#224448"
      v-model="showcalendar"
      type="range"
      @confirm="onConfirm"
      :minDate="minDate"
      @close="clearTime"
    />
    <van-popup v-model="showStatus" position="bottom">
      <van-picker
        show-toolbar
        :columns="statusList"
        @confirm="onConfirmStatus"
        @cancel="onCancelStatus"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import TopBar from "@/components/topBar.vue";
import moment from "moment";
export default {
  name: "searchLeads",
  data() {
    return {
      list: [],
      statusList: ["All"],
      showcalendar: false,
      showStatus: false,
      minDate: new Date(2020, 0, 1),
      confirmShow: false,
      form: {
        start: "",
        end: "",
        search: "",
        status: "All",
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getStatus();
    },
    getStatus() {
      this.$api.leads_status_status().then((res) => {
        this.statusList.push(...res.data);
        // this.form.status = res.data[0];
        this.getList();
      });
    },
    getList() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$api
        .laeds_status_lists({
          lead_status:
            this.form.status == "All" ? "" : this.form.status,
          sender_full_name: this.form.search,
          date_start: this.form.start
            ? this.form.start.replace(/\//g, "-")
            : "",
          date_end: this.form.end ? this.form.end.replace(/\//g, "-") : "",
        })
        .then((res) => {
          Toast.clear();
          this.list = res.data;
        });
    },
    onConfirmStatus(value) {
      this.form.status = value;
      this.showStatus = false;
      this.getList();
    },
    onCancelStatus() {
      this.showStatus = false;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.showcalendar = false;
      this.form.start = moment(start).format("YYYY/MM/DD");
      this.form.end = moment(end).format("YYYY/MM/DD");
      this.confirmShow = true;
      this.getList();
    },
    clearTime() {
      if (this.confirmShow) {
        this.confirmShow = false;
      } else {
        this.form.start = "";
        this.form.end = "";
      }
      this.getList();
    },
  },
  filters: {
    getEnUs(val) {
      return ((val * 1).toFixed(2) * 1).toLocaleString("en-US");
    },
  },
  components: {
    TopBar,
  },
};
</script>

<style lang="scss" scoped>
.searchLeads {
  height: 100vh;
  background-color: #f4f4f4;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  overflow-y: auto;
  .select-group {
    padding: 20px 15px;
    background-color: #fff;
    .select-wrapper {
      width: 100%;
      height: 40px;
      background: #f4f4f4;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      box-sizing: border-box;
      margin-bottom: 15px;
      .icon {
        width: 13px;
        height: auto;
      }
    }

    .silde-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .select-btn {
        width: 54%;
        line-height: 40px;
        background: #f4f4f4;
        border-radius: 10px;
        color: #919191;
        text-align: center;
      }

      .select-input {
        width: 40%;
        line-height: 40px;
        background: #f4f4f4;
        border-radius: 10px;
        color: #919191;
        padding-left: 15px;
      }
    }
  }
  .card-list {
    .card {
      margin-top: 10px;
      background-color: #fff;
      .card-title {
        background: #224448;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        p {
          font-size: 14px;
          font-weight: bold;
          color: #ffffff;
        }
      }
      .card-body {
        padding: 1px 15px 20px;
        word-break: break-all;
        .card-body-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 15px;
          &.block {
            display: block;
            .card-value {
              padding-left: 15px;
              margin-top: 15px;
            }
          }
          .card-label {
            font-size: 13px;
            color: #666666;
            padding-left: 15px;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              width: 5px;
              height: 5px;
              background-color: #224448;
              border-radius: 50%;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }

          .card-value {
            font-size: 13px;
            font-weight: bold;
            color: #224448;
          }
        }
        .card-line {
          height: 1px;
          background-color: #f4f4f4;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>